/** *比赛牛人列表 */
<template>
	<div>
		<gj-loadmore :bottom-method="loadBottom" :bottomPullText="bottomPullText" ref="loadmore">
		<div ref="gameJion" style="display: none;">
			<div class="text-center m-t-sm">
				<img src="../../assets/images/m-niuniu.png">
			</div>
			<div style="color:#FD5400;font-size:30px;text-align:center;margin-top:10px;font-weight: bold">
				咧咧咧
			</div>
			<div class="m-t-sm text-center color-56">
				<div>目前比赛都在进行中哦，还没有胜出。 </div>
				<div>人人都有机会上榜呢，快来参加比赛哟！</div>
			</div>
			<div class="m-t-sm">
				<div class="match-btn">立即参赛</div>
			</div>
		</div>
		<div class="wrapper-xs bg-white"></div>
		<div class="cattle-person-table active-box"  style="margin-bottom: -12px;" v-for="(item,index) in dataList">
			<div class="hbox cattle-person-table-box match-box" @click="clickBox(item)">
				<div class="col head-icon v-middle skip">
					<!--<img v-bind:src="item.USER_HEAD" alt="" onerror="onerror=null;src='<%=defUserHead%>'">-->
					<img src="../../assets/images/tou1@2x.png" alt="" v-show="item.USER_HEAD==''" />
					<img v-bind:src="item.USER_HEAD" v-show="item.USER_HEAD!=''">
				</div>
				<div class="col v-middle skip">
					<div class="color-56">
						{{item.NICKNAME}}
					</div>
				</div>
				<div class="col v-middle text-center col-x-3 skip">
					<div class="cattle-person-table-futou">
						<div class="m-t-sm">得分</div>
						<div class="text-lg color-blue">
							{{item.SCORE}}
						</div>
					</div>
				</div>
				<div class="col v-middle text-center col-x-1 has-btn" @click.stop="collapse(index)">
					<div class="cattle-person-circle-arrow-btn" :class="{'cattle-person-circle-arrow-btn-transform':index===expandedIndex}" >
						<i class="iconfont icon-xiangxia"></i>
					</div>
				</div>
			</div>
      <div >
        <div class="cattle-person-table-hbox-child-ref match-box-ref " :class="{'_show':index===expandedIndex,'_hide':expandedIndex!==index}" style="display:none">
          <div class="hbox cattle-person-table-hbox-child text-center" >
            <div class="col v-middle">
              <div class="color-9">总收益率</div>
              <div class="color-green text-lg total_rate" :class="numberFormat(item.moreData.total_rate)>=0?'color-red':'color-green'">{{numberFormat(item.moreData.total_rate)}}%</div>
            </div>
            <div class="col v-middle">
              <div class="color-9">最大回撤</div>
              <div class="color-blue text-lg withdraw">{{numberFormat(item.moreData.withdraw)}}%</div>
            </div>
            <div class="col v-middle">
              <div class="color-9">近一月操作</div>
              <div class="color-56 text-lg lastmothoptimes">{{item.moreData.lastmothoptimes}}次</div>
            </div>
            <div class="col v-middle text-center subscribe" @click.stop="subscribe(item)">
              <div class="cattle-person-circle-btn">
                <i class="iconfont " :class="{'icon-x':item.SUBSCRIBE_FLAG==1,'icon-dingyue':item.SUBSCRIBE_FLAG==0}"></i>
              </div>
              <span class="color-9 text-xs" v-text="item.SUBSCRIBE_FLAG==1?'取消订阅':'订阅'"></span>

            </div>
          </div>
        </div>
      </div>

		</div>
		</gj-loadmore>
		<subscribe-cancel-modal></subscribe-cancel-modal>
		<subscribe-modal></subscribe-modal>
	</div>
</template>

<script type="text/javascript">
	import RemoteDAO from 'common/remoteDAO'
	import LocalDAO from 'common/localDAO'
	import CommonUtil from 'common/common.util'
	import LoadMore from 'components/LoadMore'
	import SubscribeCancelModal from 'components/modal/SubscribeCancelModal'
	import SubscribeModal from 'components/modal/SubscribeModal'
	export default {
		data() {
			return {
				msg1:'',
				msg:'',
				userCode: '',
				nickName: '',
				pageObj: {
					pageNum: 1,
					pageSize: 10,
				},
				defUserHead: '',
				expandedIndex: '',
				dataList: [],
				bottomPullText:"向上滑动更多牛人"
			}
		},
		components: {
			'subscribe-cancel-modal': SubscribeCancelModal,
			'subscribe-modal': SubscribeModal,
			'gj-loadmore':LoadMore
		},
//		watch:{
//      expandedIndex:function (){
//        $("._show").slideDown(500);
//        $("._hide").slideUp(500)
//      }
//		},
    updated(){
      $("._show").slideDown(500);
      $("._hide").slideUp(500)
    },
		methods: {
			numberFormat (data) {
				if(isNaN(data)){
					return data;
				}
				
				return parseFloat(data).toFixed(2);
			},
			isEmpty(data) {
				return data == null || data == undefined;
			},
			collapse(index) {
				var vm = this;
				vm.expandedIndex = index === vm.expandedIndex ? '' : index;
				var userCode = vm.dataList[index].USER_CODE;

				vm.msg1=vm.dataList[index]

				if(vm.expandedIndex >= 0 && vm.nickName) {
					vm.printManInfo(userCode,index)
				}
			},
			subscribeCancelModal(relationUserCode, callback) {
				//订阅需传递要订阅的用户的userCode 即relationUserCode   callback:回调函数，若Number(response.error) === 0,则操作成功
				this.$store.dispatch('setModal', { visible: true, modalId: 'subscribeCancelModal', relationUserCode: relationUserCode, callback });
			},
			subscribeModal(relationUserCode, callback) {
				//取消需传递订阅的用户的userCode 即relationUserCode;   callback:回调函数，若Number(response.error) === 0,则操作成功
				this.$store.dispatch('setModal', { visible: true, modalId: 'subscribeModal', relationUserCode: relationUserCode, callback });
			},
			//牛人信息打印
			printManInfo(userCode,index) {
				var vm=this;
				RemoteDAO.callJCL30034(userCode, function(resp) {
					if(Number(resp.error) == 0) {
						for(var i=0;i<vm.dataList.length;i++){
							vm.dataList[index].moreData=resp.data.body.data[0];
						}
					}
				});
			},
			loadBottom() {
  		        let vm = this;

		        vm.fetchData(function (allLoaded,error) {
		          if(error){
		            vm.$refs.loadmore.onBottomError(error);//单次加载失败或者没有数据，error为报错信息，如果是没有数据，写暂无数据
		          }else if (allLoaded) {
		            vm.$refs.loadmore.onBottomAllLoaded();//全部数据加载完成
		          } else {
		            vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
		          }
		        });
		      },
			//点击整行
			clickBox(item) {
				item.expandedIndex = '';
				var vm = this;
				vm.$router.push({ path: '/otherdetail', query: { userCode: item.USER_CODE } })

				var userCode = LocalDAO.getUserCode();
				var kv = { "usercode": userCode, "k2": "" };
				TDAPP.onEvent("15010", "", kv);
				TDAPP.send();

			},
			//获取列表数据
			fetchData(afterFetchData) {
				var vm = this,
					allLoaded,
					error;

				RemoteDAO.callUC12008319(vm.userCode, vm.pageObj.pageSize, vm.pageObj.pageNum, function(resp) {
					if(resp.error == "0") {
						var respData = resp.data || {};
						var data = respData.body || [];
						data.forEach(function(item){
		                	item.moreData = {
		                		total_rate: '-',
		                		withdraw: '-',
		                		lastmothoptimes: '-'
		                	};
		                });

						vm.dataList = vm.dataList.concat(data || []);
						if(vm.dataList.length>0){
							$(vm.$refs.gameJion).hide()
						}else{
							$(vm.$refs.gameJion).show()
						}

			            if(vm.dataList.length == 0){
			              error = ''
			            }else if (data.length < vm.pageObj.pageSize){
			              allLoaded = true
			            }

		                if(!allLoaded){
		                	vm.pageObj.pageNum++;
		                };
					} else{
     					error = response.data;
  					}

					afterFetchData(allLoaded, error);
				})
			},
			//订阅
			subscribe(item) {
				var vm = this;
				if(!LocalDAO.getNickname()) {
					var kv = { "usercode": "", "k2": "" };
					TDAPP.onEvent("2015", "", kv);
					TDAPP.send();
					//注册或登录
					RemoteDAO.callNativeLogin(function(response) {
						if(response.error == 0) {
              vm.$store.dispatch('setTip',{text: "已为您登录，请重新查看点击"});
              setTimeout(function () {
                window.location.reload(true);
              },1000)
						} else {
              vm.$store.dispatch('setTip',{text:response.data});
						}
					});
				} else {
					var relationUserCode = item.USER_CODE;
					if(item.SUBSCRIBE_FLAG == 1) {
						vm.subscribeCancelModal(relationUserCode, function(response) {
							if(Number(response.error) == 0) {
								item.SUBSCRIBE_FLAG = 0
							}
						})
						//取消订阅弹窗
					} else {
						//订阅弹窗
						vm.subscribeModal(relationUserCode, function(response) {
							if(Number(response.error) == 0) {
								item.SUBSCRIBE_FLAG = 1
							}
						})
					}
				}
			}
		},
		created() {
			var vm = this;
			vm.userCode = LocalDAO.getUserCode(); //用户ID
			vm.nickName = LocalDAO.getNickname() || '00000'; //用户名
		}
	}
</script>
